<template>
  <div class="scroll_box">
    <div class="tab_scroll" border="0">
      <!-- 设置列宽 -->
      <div
        :style="{
          minWidth: item.width,
          maxWidth: item.width,
          background: '#263050'
        }"
        v-for="(item, index) in tabData"
        :key="index"
      >
        {{ item.name }}
      </div>
    </div>
    <vue-seamless-scroll
      :class-option="defaultOption"
      :data="taskList"
      class="seamless-warp"
      v-if="taskList.length"
    >
      <div
        v-for="(item, index) in taskList"
        :key="index"
        class="liStyle"
        :class="index % 2 == 0 ? '' : 'light'"
      >
        <div class="title text_align" style="min-width: 30%; max-width: 30%">
          {{ item.batchNumber }}
        </div>
        <div class="title text_align" style="min-width: 30%; max-width: 30%">
          {{ item.deviceName }}
        </div>
        <div
          class="title text_align progress_width"
          style="min-width: 40%; max-width: 40%"
        >
          <!-- <el-progress :percentage="item.num"></el-progress> -->
          <el-progress
            :percentage="item.num"
            :stroke-width="6"
            :color="customColors"
          ></el-progress>
        </div>
      </div>
    </vue-seamless-scroll>
    <div v-else class="message flex-y flex-center">暂无数据</div>
  </div>
</template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll";
import Scanning from "./scanning.vue";
export default {
  props: {
    taskList: {
      type: Array,
      default: []
    }
  },
  computed: {},
  data() {
    return {
      tabData: [
        {
          name: "批次号",
          width: "30%"
        },
        {
          name: "设备名称",
          width: "30%"
        },
        {
          name: "进度",
          width: "40%"
        }
      ],
      customColors: [
        { color: "#f56c6c", percentage: 20 },
        // { color: "#e6a23c", percentage: 40 },
        { color: "#1989fa", percentage: 60 },
        { color: "#5cb87a", percentage: 80 },
        { color: "#6f7ad3", percentage: 100 }
      ]
    };
  },
  components: { Scanning, vueSeamlessScroll },
  computed: {
    defaultOption() {
      return {
        step: 0.3, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      };
    }
  },
  methods: {},
  mounted() {
    // this.$nextTick(() => {
    //   this.testArray = [
    //     {
    //       name: "w23",
    //       num: 40,
    //       ljname: "高蜗轮盘",
    //       type: "热表",
    //       typeNum: "1",
    //       status: "success" //success/exception/warning
    //     },
    //     {
    //       name: "w21",
    //       num: 100,
    //       ljname: "高蜗轮盘",
    //       type: "热表",
    //       typeNum: "222",
    //       status: "exception"
    //     }
    //   ];
    //   for (let index = 0; index < 30; index++) {
    //     // const element = array[index];
    //     const n = [1, 3, 4, 6, 11, 20, 25, 14];
    //     const obj = {
    //       typeNum: index + "222",
    //       name: "w23",
    //       num: n.includes(index) ? 90 : 60 + index,
    //       ljname: "高蜗轮盘",
    //       type: "热表"
    //     };
    //     this.testArray.push(obj);
    //   }
    // });
  }
};
</script>
<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
.scroll_box {
  height: 91%;
  padding: 0 20px;
  .message {
    height: 80%;
    // background: red;
    text-align: center;
    width: 100%;
    color: #bcdbe9;
    font-size: 14px;
  }
  .tab_scroll {
    /* margin-top: 20px; */
    display: flex;
    div {
      color: #bcdbe9;
      &:first-child {
        border-left: 0;
      }
      padding-left: 20px;
      min-width: 80px;
      max-width: 80px;
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      text-align: left;
      /* background-color: rgba(180, 181, 198, 0.1); */
    }
  }
  .seamless-warp {
    height: 91%;
    //  height: 150px;
    overflow: hidden;
    .liStyle1 {
      background-color: rgba(0, 172, 63, 0.3);
    }
    .liStyle2 {
      background-color: rgba(80, 28, 108, 0.3);
    }
    /deep/ .el-progress path:first-child {
      // 修改进度条背景色
      stroke: #091224;
    }
    /deep/ .el-progress__text {
      // 修改进度条文字提示颜色
      color: #bcdbe9;
    }
    .liStyle {
      line-height: 30px;
      width: 100%;
      display: flex; //设置flex布局，否则span标签无法设置宽度

      //设置宽度与表头列宽一致
      .title {
        &:first-child {
          border-left: 0;
        }
        color: #bcdbe9;
        // min-width: 80px;
        // max-width: 80px;
        height: 30px;
        @include textoverflow(1);
        line-height: 30px;
        font-size: 14px;
      }
      .title.progress_width {
        padding-left: 10px;
        /deep/ .el-progress {
          line-height: inherit;
          .el-progress-bar__outer {
            height: 16px !important;
            background-color: transparent;
            /* line-height: 30px; */
          }
        }
      }
      .text_align {
        text-align: left;
        padding-left: 20px;
      }
    }
  }
}

.flex {
  display: flex;
  align-items: center;
}
.font14 {
  font-size: 14px;
}
.light {
  background: #263050;
}
</style>
